﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta charset="UTF-8" />
    <title>室内三维场景路径规划示例|室内三维可视化引擎|易景三维可视化平台</title>
    <meta
      name="keywords"
      content="室内三维场景路径规划示例,室内三维场景,三维场景引擎,三维场景制作,室内定位,易景三维可视化平台,ESMap"
    />
    <meta
      name="description"
      content="室内三维场景路径规划示例,易景室内三维可视化引擎提供三维场景浏览、缩放、旋转、图层显隐等基础功能，支持自定义室内三维场景显示风格及样式，可自动绘制楼层热力图、散点图等专题三维场景，快速进行空间大数据分析展示。支持跨楼层精准的点到点之间的最短、最优路径计算，支持对路径结果进行导航和动画,并提供丰富的三维场景主题资源供二次开发调用。"
    />
    <link rel="shortcut icon" type="image/ico" href="../image/favicon.ico" />
    <link href="css/common.css" rel="stylesheet" />
  </head>
  <style type="text/css">
    #pannel {
      position: absolute;
      left: 2%;
      bottom: 10%;
      z-index: 999;
    }

    button,
    input[type="button"] {
      padding: 7px 11px;
      background-color: #fff;
      border: none;
      cursor: pointer;
      border-radius: 3px;
    }

    .tip {
      position: absolute;
      top: 68px;
      left: 50%;
      z-index: 999;
      background: #fff;
      padding: 12px 20px;
      font-size: 15px;
      font-family: "微软雅黑";
      border-radius: 3px;
      margin-left: -80px;
    }
  </style>

  <body ms-controller="ctrl" class="ms-controller">
    <div id="map-container"></div>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <h1>
          <a href="/" title="室内三维场景-室内三维场景" target="_blank"
            >易景室内三维可视化引擎</a
          >
          (路径规划示例)
        </h1>

        <div class="tips-right">
          <span class="tip1"></span>
          <a class="tip2" onclick="tipClick('/api/senior/pathPlan/')"></a>
        </div>
        <div class="tips-msg">
          <div class="msg msg1">
            <div class="erweima"></div>
            <p>手机扫一扫进入体验</p>
          </div>
          <div class="msg msg2">
            <h4>路径规划示例</h4>
            <p>1. 自动规划最短路径</p>
            <p>2. new esmap.ESNavigation({...}) 创建导航对象</p>

            <div style="display: none">
              室内三维场景路径规划示例,易景室内三维可视化引擎提供三维场景浏览、缩放、旋转、图层显隐等基础功能，支持自定义室内三维场景显示风格及样式，可自动绘制楼层热力图、散点图等专题三维场景，快速进行空间大数据分析展示。支持跨楼层精准的点到点之间的最短、最优路径计算，支持对路径结果进行导航和动画,并提供丰富的三维场景主题资源供二次开发调用。
            </div>
          </div>
        </div>
      </div>
    </nav>
    <div class="tip">
      <span>点击选择起点终点</span>
    </div>
    <div id="pannel">
      <input
        type="button"
        class="btn btn-default btnclass"
        onclick="clearNavi()"
        value="清除"
      />
    </div>
    <script src="../lib/config.js"></script>
    <script src="../lib/esmap-3.0.min.js"></script>
    <script src="../lib/jquery-2.1.4.min.js"></script>
    <script src="../lib/jquery.qrcode.min.js"></script>
    <script src="../lib/tips_controls.js"></script>
    <script type="text/javascript">
      //定义全局map变量
      var map;
      var esmapID = getQueryString("id") || defaultOpt.mapID;
      var mapCoord = null;
      // 导航对象
      var navi;
      var h;
      var building;
      $(function () {
        // 楼层控制控件配置参数
        var ctlOpt = new esmap.ESControlOptions({
          position: esmap.ESControlPositon.RIGHT_TOP,
          imgURL: "image/wedgets/",
        });
        // 放大、缩小控件配置
        var ctlOpt1 = new esmap.ESControlOptions({
          position: esmap.ESControlPositon.LEFT_TOP, // 位置 左上角
          // 位置x,y的偏移量
          offset: {
            x: 20,
            y: 70,
          },
          imgURL: "image/wedgets/",
        });
        var container = document.getElementById("map-container");
        map = new esmap.ESMap({
          mode: esmap.MapMode.Building,
          container: container, // 渲染dom
          mapDataSrc: '../data',
          mapAudioSrc: "../lib", //导航语音位置,导航的必须配置
          token: "escope"
        });

        map.openMapById(esmapID);
        map.showCompass = true; //显示指南针
        //三维场景加载完成回调
        map.on("loadComplete", function () {
          building = map.getBuilding();
          var floorControl = new esmap.ESScrollFloorsControl(map, ctlOpt);
          // var zoomControl = new esmap.ESZoomControl(map, ctlOpt1);
          createNavi();
        });

        // 点击计数
        var clickCount = 0;

        //判断起点是否是同一处坐标
        var lastCoord = null;
        var curfnum = null;
        //点击三维场景事件。开始选点开始后，点击三维场景一次为起点，第二次点击为终点
        map.on("mapClickNode", function (event) {
          console.log(event);
          if (event.nodeType == 4) {
            h = 1;
            curfnum = event.floor;
            mapCoord = event.hitCoord;
          }
          if (event.nodeType == 5) {
            curfnum = event.FloorNum;
            h = event.RoomHigh;
            mapCoord = event.hitCoord;
          }
          curfnum && show(curfnum, mapCoord);
        });

        show = function (fnum, coord) {
          if (!navi) return;
          if (coord != null) {
            //第三次点击清除路径，重现设置起点起点
            if (clickCount == 2) {
              navi.clearAll();
              clickCount = 0;
              lastCoord = null;
            }

            //第一次点击添加起点
            if (clickCount == 0) {
              lastCoord = coord;
              navi.setStartPoint({
                x: coord.x,
                y: coord.y,
                fnum: fnum,
                url: "image/start.png",
                height: h,
                size: 64,
              });
            } else if (clickCount == 1) {
              //添加终点并画路线
              //判断起点和终点是否相同
              if (lastCoord.x == coord.x) {
                alert("起点和终点不能相同!,请重新选点");
                return;
              }
              navi.setEndPoint({
                x: coord.x,
                y: coord.y,
                fnum: fnum,
                url: "image/end.png",
                height: h,
                size: 64,
              });

              //画导航线
              navi.getRouteResult({
                drawRoute: true,
              })
            }
            clickCount++;
          }
          curfnum = null;
        };
      });

      function createNavi() {
        if (building.naviData.length == 0) {
          alert("三维场景导航数据信息不存在！");
          return;
        }
        if (!navi) {
          //初始化导航对象
          navi = new esmap.ESNavigation({
            map: map,
            locationMarkerUrl: "image/pointer.png",
            locationMarkerSize: 150,
            speed: 15,
            followAngle: false,
            tiltAngle: 80,
            scaleLevel: 0,
            // 设置导航线的样式
            lineStyle: {
              color: "#33cc61",
              //设置线为导航线样式
              lineType: esmap.ESLineType.ESARROW,
              lineWidth: 6,
              fixedWidth: true,
              //设置边线的颜色
              godEdgeColor: "#66cc99",
              //设置箭头颜色
              godArrowColor: "#333366",
            },
          });
        }
      }

      function clearNavi() {
        if (navi) navi.clearAll();
      }
    </script>
  </body>
</html>
